<!-- 费用类 -->
<template>
	<view v-if="feeCategory=='2'">
		<u-form :model="model" ref="uForm" labelPosition="top" labelWidth="auto" :labelStyle="{
				fontSize: '14px',
				color: '#B2B2B2',
				lineHight: '20px'
			}">
					<u-form-item label="是否关联项目" prop="isRelProject">
						<h-radio-group
							:disabled="costList.length!=0 || showFlowSubmitButton"
							v-model="model.isRelProject"
							dictName="YES_OR_NO"
							@change='isRelProjectChange'
						/>
					</u-form-item>
				</u-form>
		<!-- <u-button size="small" style="width: 60upx; margin: inherit" type="primary" text="新增" @click="getNewPop"/> -->
		<view style="margin: 20rpx 20rpx 0rpx 20rpx;" v-if="showButton || !showFlowSubmitButton">
			<u-button text="新增" type="primary" @click="getNewPop"></u-button>
		</view>
		<!-- 是关联 -->
		<view class="inforamtion" v-for="(item, index) in costList" :key="index">
			<view>
				<view v-if="model.isRelProject=='1'">
					<view class="option" style="width: 460rpx;">
						<view class="lf">项目名称</view>
						<view class="rl">{{ item.projectName }}</view>
					</view>
					<view class="option" style="width: 460rpx;">
						<view class="lf">项目编号</view>
						<view class="rl">{{ item.projectCode }}</view>
					</view>
					<view class="option" style="width: 460rpx;">
						<view class="lf">业绩归属年度</view>
						<view class="rl">{{ item.performanceAttributionYear }}</view>
					</view>
					<view class="option" style="width: 460rpx;">
						<view class="lf">合同名称</view>
						<view class="rl">{{ item.relContractId_dictText }}</view>
					</view>
					<view class="option" style="width: 460rpx;">
						<view class="lf">任务分类</view>
						<view class="rl">{{ item.taskCategory_dictText }}</view>
					</view>
					<!-- <view class="option" style="width: 460rpx;">
						<view class="lf">任务说明</view>
						<view class="rl">{{ item.taskName }}</view>
					</view> -->
				</view>
				<view class="option" style="width: 460rpx;">
					<view class="lf">费用大类</view>
					<view class="rl">{{ item.bigCategoryName }}</view>
				</view>
				<view class="option" style="width: 460rpx;">
					<view class="lf">费用小类</view>
					<view class="rl">{{ item.smallCategoryName }}</view>
				</view>
				<view class="option" style="width: 460rpx;">
					<view class="lf">发票类型</view>
					<view class="rl">{{ item.isSpecial_dictText }}</view>
				</view>
				<view class="option" style="width: 460rpx;">
					<view class="lf">报销金额（元）</view>
					<view class="rl">{{ item.amount }}</view>
				</view>
				<view class="option" style="width: 460rpx;">
					<view class="lf">税费金额（元）</view>
					<view class="rl">{{ item.taxation }}</view>
				</view>
				<view class="option" style="width: 460rpx;">
					<view class="lf">未税金额（元）</view>
					<view class="rl">{{ item.untaxedAmount }}</view>
				</view>
				<view class="option" style="width: 460rpx;">
					<view class="lf">税率（%）</view>
					<view class="rl">{{ item.taxRate }}</view>
				</view>
			</view>
			<view style="display: flex; align-items: center;">
				<u-icon v-if="showButton || showFlowSubmitButton" style="margin-right: 10upx;" name="edit-pen-fill" color="#2979ff" size="20" @click="onEdit(item, index)"/>
				<template v-if="showButton || !showFlowSubmitButton">
					<u-line direction="col" length="20" margin="0 10rpx"></u-line>
					<view class="icon custom-icon custom-icon-fuzhiwenjian" style="color:#2979ff;font-size: 20px"
						@click.stop="handleCopyForm(item, index)"></view>
					<u-line direction="col" length="20" margin="0 10rpx"></u-line>
					<u-icon name="trash-fill" color="red" size="20"  @click="onDelete(item, index)"/>
				</template>
			</view>
		</view>
		
		<addCostForm ref='addForm' :teamId='teamId' :companyId='companyId' 
			:isRelProject='model.isRelProject' dictName="A01A03" :formBpm="showFlowSubmitButton"
			@confirm='addConfirm'/>
		
	</view>
</template>

<script>
	import { initDictOptions } from '@/utils/JDictSelectUtil.js'
	import addCostForm from './comp/addCostForm.vue'
	export default {
		components:{addCostForm},
		data() {
			return {
				costList:[],//费用类的list
				model: {
					isRelProject: ''
				}
			}
		},
		props: {
			isRelProject: {
				type: [String, Number],
				default: '1'
			},
			feeCategory: {
				type: String,
				default: ''
			},
			companyId:{
				type: String,
				default: ''
			},
			teamId:{
				type: String,
				default: ''
			},
			showButton: {
				type: Boolean,
				default: true
			},
			//表单模式：true流程表单 false普通表单
			showFlowSubmitButton: {
				type: Boolean,
				default: false
			}
		},
		mounted() {
			
		},
		watch:{
			isRelProject: {
			  handler(val) {
					this.model.isRelProject = val
			  },
			  deep: true,
				immediate: true
			},
		},
		methods: {
			getNewPop(){
				this.$refs.addForm.showNew=true
				this.$refs.addForm.basicForm={
					projectId:'',//项目
					projectName:'',
					relContractId:'',//合同
					relContractName:'',
					taskCategory:'',//任务分类
					// taskName:'',//任务说明
					performanceAttributionYear:'', //业绩归属年度
					/* ------ */
					bigCategory:"",//大类
					bigCategoryName:'',
					smallCategory:"",//小类
					smallCategoryName:'',
					isSpecial:'',//发票类型
					isSpecial_dictText:'',
					amount:'',//报销金额(元)
					taxation:0.00,//税费金额(元)
					untaxedAmount:'',//未税金额(元)
					taxRate:0,// 税率(%)
				}
				this.$refs.addForm.specialRules()
			},
			isRelProjectChange() {
				this.costList=[]
				this.$emit('change', this.model.isRelProject)
			},
			// 编辑
			onEdit(item, index){
				this.$refs.addForm.basicForm= Object.assign({}, item)
				this.$refs.addForm.specialRules(item.isSpecial)
				this.$refs.addForm.showNew=true
			},
			// 复制
			handleCopyForm(item) {
				var _this = this
				uni.showModal({
					content: '确定复制行吗？',
					success: (res) => {
						if (res.confirm) {
							let model = Object.assign({}, item);
							model.id=parseInt(Math.random() * 1000000000000);
							_this.costList.push(JSON.parse(JSON.stringify(model)))
							_this.$emit('inputAmount', '3')
							_this.$emit('getDailyFeeInfoList', this.costList)
						}
					},
				})
			},
			// 删除
			onDelete(item, index){
				uni.showModal({
					title: '提示',
					content: '是否删除该数据？',
					success: (res) => {
						if (res.confirm) {
							this.costList.splice(index,1)
							this.$emit('inputAmount', '3')
							this.$emit('getDailyFeeInfoList', this.costList)
						}
					}
				});
			},
			addConfirm(item,isEdit){
				if(isEdit){
					this.costList.map((value, index) => {
						if (value.id == item.id) {
							this.$set(this.costList, index, item)
							value = item
						}
					})
				}else{
					this.costList=this.costList.concat(item)
				}
				this.$emit('inputAmount', '3')
				this.$emit('getDailyFeeInfoList', this.costList)
			}
		},
	}
</script>
<style lang="scss" scoped>
	.inforamtion{
		display: flex;
		margin-top: 10rpx;
		padding: 10rpx;
		border-radius: 15rpx;
		box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.1);
	}
</style>